<template>
	<div class="rp-exchange">
		<img class="bg" src="@/assets/2/images/red-package/exchange-bg.png" alt="" />

		<div class="header">
			<span class="label">兑礼品</span>

			<div class="countdown">
				<cl-countdown :layout="['hour', 'minute', 'second']" isMillisecond :splitor="[':', ':', ':']" :datetime="endTime"></cl-countdown>
				<span>后刷新</span>
			</div>

			<span class="link" @click="openRecord"
				>兑换记录
				<i class="cl-icon-arrow-right"></i>
			</span>
		</div>

		<div class="container">
			<ul class="list">
				<li v-for="(item, index) in list" :key="index" @click="toDetail(item)">
					<img class="cover" :src="item.pic" alt="" />

					<div class="det">
						<p class="title">{{ item.title }}</p>
						<div class="price">
							<span class="now">{{ item.endPrice }}</span>
							<span class="old">{{ item.price }}</span>
						</div>
						<p class="num">已兑{{ item.defNum }}件</p>

						<button class="is-exchanged" v-if="item.hasBuy">已兑换</button>
						<button v-else>{{ item.goldAmount || 0 }}金币兑换</button>
					</div>
				</li>
			</ul>

			<div class="rules">
				<rules-text></rules-text>
			</div>
		</div>

		<!-- 明细 -->
		<gold-record ref="gold-record"></gold-record>
	</div>
</template>

<script>
import moment from 'moment';
import _ from 'lodash';
import { Toast } from 'vant';
import ClCountdown from '@/components/countdown';
import RulesText from './components/rules/text';
import GoldRecord from './components/gold/record';

export default {
	components: {
		ClCountdown,
		RulesText,
		GoldRecord
	},

	data() {
		return {
			list: [],
			endTime: moment().format('YYYY-MM-DD 23:59:59')
		};
	},

	created() {
		this.refresh();
	},

	methods: {
		// 礼品列表
		refresh() {
			this.$service.bwbt.bwbtGold
				.getMdGoodsPage({ page: 1, size: 3 })
				.then(res => {
					this.list = res.list.map(e => {
						e.endPrice = (e.endPrice - e.tljMoney).toFixed(2);

						return e;
					});
				})
				.catch(err => {
					Toast(err.message);
				});
		},

		// 详情
		toDetail(item) {
			this.$store.commit('SET_SELECT', { key: 'giftInfo', value: item, save: true });

			this.$router.push({
				path: '/red-package/exchange-detail'
			});
		},

		// 打开明细
		openRecord() {
			this.$refs['gold-record'].open();
		}
	}
};
</script>

<style lang="scss" scoped>
.rp-exchange {
	.bg {
		height: 386px;
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
	}

	.header {
		display: flex;
		align-items: center;
		font-size: 28px;
		position: relative;
		height: 90px;
		padding: 20px;

		.label {
			font-size: 36px;
			font-weight: 500;
			margin-right: 10px;
			color: #fff;
		}

		.countdown {
			display: flex;
			align-items: center;
			color: #fff;

			/deep/.cl-countdown {
				position: relative;
				top: 2px;

				&__number {
					background-color: transparent !important;
					margin: 0;
					padding: 0;
					font-size: 28px;
					color: #fff;
				}
			}
		}

		.link {
			position: absolute;
			right: 20px;
			color: #fff;
		}
	}

	.container {
		.list {
			display: flex;
			flex-wrap: wrap;
			margin: 0 -0 20px -0;
			padding: 0 10px;

			li {
				width: calc(50% - 20px);
				margin: 0 10px 20px 10px;
				font-size: 24px;
				border-radius: 10px;
				background-color: #fff;

				.cover {
					display: block;
					height: 332px;
					width: 100%;
					background-color: #eee;
					border-radius: 10px 10px 0 0;
				}

				.det {
					padding: 20px;
				}

				.title {
					font-size: 32px;
					font-weight: bold;
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.price {
					display: flex;
					align-items: center;

					.now {
						color: #ff462c;
						font-size: 28px;
						font-weight: 500;

						&::before {
							content: '到手价¥';
							font-size: 24px;
						}
					}

					.old {
						color: #707070;
						font-size: 24px;
						margin-left: 10px;
						text-decoration: line-through;
					}
				}

				.num {
					color: #717076;
				}

				button {
					display: flex;
					align-items: center;
					line-height: normal;
					height: 54px;
					padding: 0 20px;
					border-radius: 100px;
					border: 0;
					font-size: 28px;
					letter-spacing: 2px;
					margin: 20px auto 0 auto;
					border: 2px solid #ff462c;
					color: #ff462c;
					font-weight: 500;
					background-color: transparent;

					&.is-exchanged {
						border-color: #ccc;
						color: #ccc;
					}
				}
			}
		}

		.rules {
			padding: 10px;
		}
	}
}
</style>
